<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI桌面管理器</title>
    <link rel="stylesheet" href="./fontawesome/css/all.min.css" />
    <link rel="stylesheet" href="./components/dialog/index.css" />
    <link rel="stylesheet" href="index.css" />
</head>
<body>
    <!-- 主容器 -->
    <div class="app-container">
        <!-- 顶部工具栏 -->
        <header class="app-header">
            <div class="app-title">
                <i class="fas fa-desktop"></i>
                <span>AI桌面管理器</span>
            </div>
            <div class="app-actions">
                <button class="action-btn" id="addFileBtn">
                    <i class="fas fa-file-plus"></i>
                    <span>添加文件</span>
                </button>
                <button class="action-btn" id="addAppBtn">
                    <i class="fas fa-plus-circle"></i>
                    <span>添加应用</span>
                </button>
            </div>
        </header>

        <!-- 主内容区域 -->
        <main class="app-main">
            <!-- 文件区域 -->
            <section class="content-section">
                <div class="section-header">
                    <h3 class="section-title">
                        <i class="fas fa-folder"></i>
                        文件管理
                    </h3>
                    <span class="section-count" id="fileCount">0</span>
                </div>
                <div class="content-list" id="fileList">
                    <div class="empty-state">
                        <i class="fas fa-folder-open"></i>
                        <p>暂无文件，点击右上角"添加文件"开始管理</p>
                    </div>
                </div>
            </section>

            <!-- 应用区域 -->
            <section class="content-section">
                <div class="section-header">
                    <h3 class="section-title">
                        <i class="fas fa-th-large"></i>
                        应用管理
                    </h3>
                    <span class="section-count" id="appCount">0</span>
                </div>
                <div class="content-list" id="appList">
                    <div class="empty-state">
                        <i class="fas fa-th-large"></i>
                        <p>暂无应用，点击右上角"添加应用"开始管理</p>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <!-- 弹窗组件结构 -->
    <div class="dialog-mask" id="dialogMask">
        <div class="dialog-container">
            <!-- 弹窗头部 -->
            <div class="dialog-header">
                <h3 class="dialog-title" id="dialogTitle">标题</h3>
                <button class="dialog-close" id="dialogClose" aria-label="关闭">×</button>
            </div>
            
            <!-- 弹窗主内容区 -->
            <div class="dialog-body" id="dialogBody">
                <p>这里是弹窗的内容区域</p>
            </div>
            
            <!-- 弹窗按钮区域 -->
            <div class="dialog-footer" id="dialogFooter">
                <button class="dialog-btn dialog-btn-cancel" id="dialogCancel">取消</button>
                <button class="dialog-btn dialog-btn-confirm" id="dialogConfirm">确定</button>
            </div>
        </div>
    </div>

    <script src="./components/dialog/dialog.js"></script>
    <script src="index.js"></script>
</body>
</html>